<template>
  <!-- <div style="width: 100%;height: 100%;margin-top: 20px;">

  </div> -->
  <div style="height: 100%;">
    <el-card class="update-log" style="height: 100%;background-color: #0C2136;border-color: #123355;">
      <div slot="header" class="clearfix">
        <span style="color: #ffffff;">同比统计</span>
      </div>
      <div class="body" style="height: 100%;">
      	<div class="echart" id="mychart1" style="width: 100%;height: 100%;"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import {
    countLogTypeByMonth
  } from "@/api/lock/logs";
  export default {
    data() {
      return {
        myChart: null,
        list: [],
        monthData: [],
        countData: []
      }
    },
    created() {


    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      })
      // 添加 resize 事件监听器
          window.addEventListener('resize', this.resizeChart);
    },
      beforeDestroy() {
        // 移除 resize 事件监听器
        window.removeEventListener('resize', this.resizeChart);
      },
    methods: {
      init() {
        // countLogTypeByMonth().then(response => {
        //   this.list = response.data;
        //   this.list.forEach(item => {
        //     this.monthData.push(item.month + '月')
        //     this.countData.push(item.count)
        //   })
          var option = {
            title: {
              text: "",
              textStyle: {
                align: "center",
                color: "#fff",
                fontSize: 20,
              },
              top: "3%",
              left: "10%",
            },
            backgroundColor: "#0C2136",
            grid: {
              left: '5%',
              right: '10%',
              top: '20%',
              bottom: '15%',
              containLabel: true
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                },
              },
            },
            legend: {
              data: [],
              top: "15%",
              textStyle: {
                color: "#ffffff",
              },
            },
            xAxis: {
              data: [
                "1-3月",
                "4-6月",
                "7-9月",
                "10-12月",
              ],
              axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                  color: "#01FCE3",
                },
              },
              axisTick: {
                show: true, //隐藏X轴刻度
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#1bb4f6", //X轴文字颜色
                },
              },
            },
            yAxis: [{
                type: "value",
                name: "万",
                nameTextStyle: {
                  color: "#1bb4f6",
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: true,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#1bb4f6",
                  },
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#1bb4f6",
                  },
                },
              },
              {
                type: "value",
                name: "同比",
                nameTextStyle: {
                  color: "#1bb4f6",
                },
                position: "right",
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  show: true,
                  formatter: "{value} %", //右侧Y轴文字显示
                  textStyle: {
                    color: "#1bb4f6",
                  },
                },
              },
              {
                type: "value",
                gridIndex: 0,
                min: 50,
                max: 100,
                splitNumber: 8,
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
                  },
                },
              },
            ],
            series: [{
                name: "销售水量",
                type: "line",
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, //平滑曲线显示
                showAllSymbol: true, //显示所有图形。
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 10, //标记的大小
                itemStyle: {
                  //折线拐点标志的样式
                  color: "#058cff",
                },
                lineStyle: {
                  color: "#058cff",
                },
                areaStyle: {
                  color: "rgba(5,140,255, 0.2)",
                },
                data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
              },
              {
                name: "主营业务",
                type: "bar",
                barWidth: 15,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "#00FFE3",
                      },
                      {
                        offset: 1,
                        color: "#4693EC",
                      },
                    ]),
                  },
                },
                data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
              },
            ],
          };

          this.myChart = echarts.init(document.getElementById("mychart1"));
          this.myChart.setOption(option);

          // 调整图表大小以适应容器
          this.resizeChart();
        // })


      },
      resizeChart() {
            if (this.myChart) {
              this.myChart.resize(); // 调整图表大小
            }
          }
    }
  }
</script>

<style scoped lang="scss">
  .el-card ::v-deep .el-card__header {
    padding: 7px 15px 7px;
    background: linear-gradient(to bottom, #1B506E, #173F5A, #13324C);
    border-bottom: #123355;
  }
  .el-card ::v-deep .el-card__body {
    height: 100%;
  }
</style>
